<template>
  <div class="home-container">
    <van-nav-bar fixed>
      <template #left>
        <img class="logo" src="@/assets/image/logo.png" alt="" />
      </template>
      <template #right>
        <!-- 只会对style里面的px转rem 外面的不会 -->
        <van-icon name="search" size="0.46rem" color="#fff" @click="searchfn" />
      </template>
    </van-nav-bar>
    <!-- 标签页 -->
    <!-- <van-tabs animated sticky offset-top="49.06px"> -->
    <!-- <van-tabs animated sticky offset-top="2.044rem"> -->
    <van-tabs
      v-model="channelId"
      @change="channelchangeFn"
      animated
      sticky
      offset-top="1.22666667rem"
      background="#fff"
    >
      <van-tab
        v-for="item in channels"
        :key="item.id"
        :title="item.name"
        :name="item.id"
      >
        <!-- {{ item.name }} -->
        <Article :channelId="channelId"> </Article>
      </van-tab>
    </van-tabs>
    <div class="plus">
      <van-icon name="plus" size="0.38rem" @click="show = true" />
    </div>
    <!-- 右侧加号 -->
    <!-- 弹出层 -->
    <van-popup class="mypop" v-model="show"
      ><channelEdit
        :channels="channels"
        :uncheckedchannel="uncheckedchannel"
        @addChannelEV="addchan"
        @removeChannelEV="removechan"
        @closeEV="closepop"
        ref="editRef"
        v-model="channelId"
      ></channelEdit
    ></van-popup>
  </div>
</template>

<script>
import { getHomeChannelListAPI, setChannel, deleteChannel } from "@/api/home";
import { getAllChannelListAPI } from "@/api/channel";
import Article from "./ArticalList.vue";
import channelEdit from "./channelEdit.vue";
export default {
  name: "Home",
  components: {
    Article,
    channelEdit,
  },
  data() {
    return {
      show: false,
      channelId: 0,
      channels: [],
      AllChannels: [],
      // artileList: [],
      Toprecord: {},
    };
  },
  //页面激活时实时记录滚动信息
  activated() {
    console.log(this.$route);
    window.addEventListener("scroll", this.moveFn);
    //激活时获取位置
    document.documentElement.scrollTop = this.$route.meta.scrollTop;
    // 兼容其他浏览器
    document.body.scrollTop = this.$route.meta.scrollTop;
  },
  //移除滚动条监听事件
  deactivated() {
    window.removeEventListener("scroll", this.moveFn);
  },
  // watch: {
  //   channelId: async function () {
  //     this.getChannel();
  //   },
  // },
  async created() {
    try {
      let resp = await getHomeChannelListAPI();
      console.log(resp.data.data.channels);
      this.channels = resp.data.data.channels;

      // this.getChannel();
    } catch (error) {
      console.dir(error);
    }

    try {
      let res = await getAllChannelListAPI();
      console.log(res);
      this.AllChannels = res.data.data.channels;
    } catch (error) {
      console.log(error);
    }
  },
  computed: {
    uncheckedchannel() {
      const newArray = this.AllChannels.filter((all) => {
        const index = this.channels.findIndex((item) => {
          return all.id == item.id;
        });
        if (index > -1) {
          // 找到有一样的,去除
          return false;
        } else {
          return true;
        }
      });
      return newArray;
    },
  },
  methods: {
    moveFn() {
      // ||号后面兼容其他浏览器获取页面高度
      this.$route.meta.scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      this.Toprecord[this.channelId] =
        document.documentElement.scrollTop || document.body.scrollTop;
      console.log(this.Toprecord);
    },
    channelchangeFn() {
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.Toprecord[this.channelId];
      });
    },
    // async getChannel() {
    //   let resp = await getAllArticles(this.channelId);
    //   console.log(resp.data.data.results);
    //   this.artileList = resp.data.data.results;
    // },
    async addchan(obj) {
      // 添加频道
      this.channels.push(obj);
      this.channels.filter((item) => {
        // 过滤掉推荐频道
        item.id != 0;
      });
      const res = await setChannel(this.channels);
      console.log(res);
    },
    async removechan(obj) {
      console.log(obj);
      const index = this.channels.findIndex((item) => {
        return item.id == obj.id;
      });
      console.log(index);
      this.channels.splice(index, 1);
      // 删除频道
      const res = deleteChannel(index);
      // console.log(res);
    },

    // 关闭弹出层
    closepop() {
      this.show = false;
      this.$refs.editRef.isEdit = false;
    },
    // 跳转到搜索页面
    searchfn() {
      this.$router.push("/search");
    },
  },
};
</script>

<style lang="less" scoped>
.logo {
  width: 150px;
  height: 47.83px;
}
/deep/ .van-tabs__content {
  margin-top: 46px;
}

/deep/ .van-tabs__wrap {
  padding-right: 10px;
}
.plus {
  position: fixed;
  right: 8px;
  top: 52px;
  // padding-left: 20px;
  z-index: 999;
  background-color: #fff;
}

.mypop {
  height: 100vh;
  width: 100vw;
}
</style>
